<template>
  <div class="adjustment">
    <DFPageList ref="dfPageListRef" :pageOptions="pageOptions"> </DFPageList>
  </div>
</template>

<script lang="ts" setup name="Adjustment">
  import lang from './lang';
  import { useMixins } from '@/hooks/useMixins';
  import {
    // infoAdjustment,
    pageAdjustment,
    addAdjustment,
    updateAdjustment,
    delAdjustment,
  } from '@/api/gather/adjustment';
  import { listAdjustmentProcess } from '@/api/gather/adjustmentProcess';
  import { listMachine } from '@/api/base/machine';
  import { listMachineUnit } from '@/api/gather/machineUnit';
  const {
    loadLangFn,
    // t
  } = useMixins();
  loadLangFn(lang);

  const dfPageListRef: any = ref(null);

  const adjustmentArr = ref([]);
  const optionsList = ref([]);

  const machineList = ref([]);

  const machineUnitList = ref([]);

  const pageOptions = {
    searchForm: {
      formSchemas: [
        {
          label: 'machineName',
          prop: 'machineCode',
          component: 'NSelect',
          options: machineList,
        },
      ],
    },
    table: {
      columns: [
        {
          width: 170,
          label: 'machineName',
          render: (row) => {
            return h('span', {
              innerText: row.machineCode
                ? machineList.value.find((item) => item.value === row.machineCode).label
                : '-',
            });
          },
        },
        {
          width: 170,
          label: 'remark',
          common: true,
        },
      ],
      action: {
        columns: [
          {
            label: 'check',
          },
          {
            label: 'edit',
          },
          {
            label: 'copy',
          },
          {
            label: 'delete',
          },
        ],
      },
      operaColumn: [
        {
          label: 'add',
        },
      ],
      requestFn: pageAdjustment,
      delRequestFn: delAdjustment,
    },
    modalFormDialog: {
      formSchemas: [
        {
          label: 'machineName',
          prop: 'machineCode',
          component: 'NSelect',
          options: machineList,
          required: true,
          giProps: { span: 4 },
          span: 3,
        },
        {
          label: 'adjustmentProcessName',
          prop: 'adjustmentProcessCode',
          component: 'NSelect',
          options: optionsList,
          required: true,
          giProps: { span: 4 },
          span: 3,
        },
        {
          label: 'machineUnitName',
          prop: 'machineUnitCode',
          component: 'NSelect',
          options: machineUnitList,
          giProps: { span: 4 },
          span: 3,
        },
        {
          label: 'remark',
          common: true,
          type: 'textarea',
          giProps: { span: 4 },
          span: 3,
        },
      ],
      cols: 2,
      addDataFn: addAdjustment,
      updateDataFn: updateAdjustment,
      afterDialogSubmitFn: initDictData,
      setDialogDataFn: async (data, type) => {
        if (type === 'add') {
          adjustmentArr.value = [];
          const newData: any = {};
          return newData;
        }

        if (type === 'copy') {
          delete data.id;
        }

        // if (data && data.adjustmentArr)
        // adjustmentArr.value = data.adjustmentArr.split(',');

        return data;
      },
      setDialogSubmitDataFn: (data) => {
        // data.adjustmentArr = adjustmentArr.value.join(',');
        return data;
      },
    },
  };

  async function initDictData() {
    const res = await Promise.all([listAdjustmentProcess(), listMachine(), listMachineUnit()]);
    const [list1, list2, list3] = res;
    optionsList.value = list1.data.map((item) => ({
      ...item,
      label: item.adjustmentProcessName + `(${item.adjustmentProcessCode})`,
      value: item.adjustmentProcessCode,
    }));

    // setTimeout(async()=>{
    //   const list3 = await infoAdjustment({machineCode:111});
    //     console.log('list3.value',list3)
    // },3000)

    machineList.value =
      list2?.data.map((item) => ({
        label: item.machineName + `(${item.machineCode})`,
        value: item.machineCode,
      })) || [];

    machineUnitList.value =
      list3?.data.map((item) => ({
        label: item.machineUnitName + `(${item.machineUnitCode})`,
        value: item.machineUnitCode,
      })) || [];
  }

  initDictData();

  // const optionsListFn = (val) => {
  //   let valObj = optionsList.value.filter(item=>{
  //     return  (!adjustmentArr.value.includes(item.value) || val === item.value)
  //   })
  //   return valObj;
  // };
</script>

<style>
  .jsoneditor-poweredBy,
  .jsoneditor-transform,
  .jsoneditor-repair,
  .jsoneditor-sort {
    display: none;
  }
</style>

<style lang="less" scoped>
  .ad-arr {
    .n-select {
      margin-top: 8px;
      margin-bottom: 8px;
    }
    .tags {
      width: 100%;
      :deep(.n-tag__content) {
        flex: 1;
      }
    }
  }
  .add {
    font-size: 26px;
    cursor: pointer;
  }
  .subAdd {
    font-size: 12px;
    color: #999;
    margin-left: 10px;
  }
</style>
